<template>
	<div class="subpage detail">
		<div class="container">
			<div class="head">
				<van-swipe :autoplay="6000" indicator-color="#31BC8D">
					<van-swipe-item style="background: #fff" v-for="item in imgArr" :key="item">
						<img :src="item" alt="">
					</van-swipe-item>
					<!--<van-swipe-item style="background: #fff">
						<img :src="imgPathTwo" alt="">
					</van-swipe-item>-->
				</van-swipe>
				<!-- <img :src="itemObj.largePic" alt=""> -->
				<div class="tip">农业精准扶贫</div>
			</div>
			<div class="content" v-for="(item, index) in superData" v-if="activeClass == index" :key="index">
				<div class="price-box">
					<span class="price"><i>{{item.salePrice}}</i>{{item.salePriceUnit}}</span>
				</div>
				<div class="project-box">
					<span class="tip">{{itemObj.saleType}}{{itemObj.postage}}</span>
					<span class="title">{{itemObj.aidDetail}}</span>
				</div>
				<div class="subtitle">{{itemObj.aidDescript}}</div>
				<div class="grade-box">
					<p class="p1">等级：{{item.level}}</p>
					<p class="p2">
						<span class="weight">重量：{{item.weight}}{{item.weightUnit}}</span>
						<span class="sum">最低订货量：{{item.minOrderQuantity}}{{item.minOrderQuantityUnit}}</span>
					</p>
					<p class="p2 p3">
						<span class="weight">规格：{{item.specs}}</span>
						<span class="sum">包装方式：{{item.packing}}</span>
					</p>
				</div>
			</div>
			<div class="produce-box">
				<div class="title-box">
					<span class="title">产地</span>
					<span class="name">
						<van-icon name="location-o" size="18px" color="#969C9E" tag="i" />{{itemObj.originProvince}}·{{itemObj.originCity}}</span>
				</div>
				<div class="wl" @click="meatTips">
					物流说明
					<van-icon name="arrow" tag="i" size="14px" />
				</div>
			</div>
			<div class="product">
				<div class="pro-top">
					<span class="pro-choose">等级选择</span>
					<span class="pro-title">共{{superLength}}种级别可选</span>  
				</div>
				<div class="pro-flex">
					<div class="inner-box" v-for="(item, index) in superData" :class="activeClass == index ? 'active' : ''" @click="getItem(index, item)"
					 :key="index">
						<span>{{item.weight}}{{item.weightSmallUnit}}</span>
						<span>{{item.name}}</span>
					</div>
				</div>
			</div>
			<div class="pro-details">
				<div class="pro-details-head">
					<img :src="itemObj.productDetail" alt="">
				</div>
			</div>
		</div>
		<div class="footer-wrap">
			<div class="footer">
				<a :href="'tel:' + cusumerTel" class="phone">
					<img src="@/assets/img/home_img11.png" alt="">
					<span>咨询电话</span>
				</a>
				<van-button round class="u-btn-default bind-btn" @click="toHelppoorPay">
					立即购买
				</van-button>
			</div>
		</div>

		<div class="meat-alert-container" v-if="meatTipsFlag">
			<div class="meat-alert-box">
				<div class="meat-alert-box-top">物流说明</div>
				<div class="meat-alert-box-center">
					<p>{{itemObj.shipmentDetail}}</p>
				</div>
				<div class="color-primary meat-alert-box-bottom" @click="meatTipsFlag = false">知道啦</div>
			</div>
		</div>

		<div class="animates">
			<div class="love">
				<img src="@/assets/img/home_img31.png" alt="">
				<span class="oshow" v-show="isShow">您已为1个家庭</span>
				<i class="oshow" v-show="isShow">带去希望</i>
			</div>
			<div id="box">
				<ul id="con1" ref="con1" :class="{anim:animate==true}">
					<li ref="oli" v-for='(item,index) in items' :key="index">
						<img src="@/assets/img/head_img.png" alt="">
					{{item.name}}
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	import Vue from 'vue';
	import { Swipe, SwipeItem } from 'vant';
	Vue.use(Swipe).use(SwipeItem);
	import Storage from "@/utils/storage";
	var timer = null;
	export default {
		data() {
			return {
				imgArr: [],
				imgPathOne: '',
				imgPathTwo: '',
				isShow: true,
				id: '',
				salePrice: '',
				maxOrderQuantity: '',
				minOrderQuantity: '',
				meatTipsFlag: false,
				activeClass: 0,
				superData: [],
				superLength: '',
				itemObj: {},
				cusumerTel: '',
				gradeId: '',
				animate: false,
				items: [ //消息列表对应的数组
					{
						name: "感谢来自刘雪恩的支持"
					},
					{
						name: "感谢来自何云霞的支持"
					},
					{
						name: "感谢来自张伶边的支持"
					},
					{
						name: "感谢来自王峻熙的支持"
					},
					{
						name: "感谢来自李明杰的支持"
					}
				]
			}
		},
		created() {
			this.id = this.$route.params.id;
			this.getDetailData() // 木耳详情页
			this.getTelData() // 客服电话
			// 选择状态
			if (Storage.get('active')) {
				this.activeClass = JSON.parse(Storage.get('active'));
			}
			// 爱心文字消失
			setTimeout(() => {
				this.isShow = false;
			}, 3300)
		},
		mounted() {
			//  上下个页面存储数据在浏览器，返回全部清除
			Storage.del('count');
			Storage.del('checkedXY');
			Storage.del('checkedZF');
			Storage.del('checkedYE');
			Storage.del('addclass');
			Storage.del('activeClass');
			timer = setInterval(this.scroll, 4000)
		},
		methods: {
			scroll() {
				let con1 = this.$refs.con1;
				let oli = this.$refs.oli;
				con1.style.marginTop = '-31px';
				this.animate = !this.animate;
				setTimeout(()=> {
					this.items.push(this.items[0]);
					this.items.shift();
					con1.style.marginTop = '0px';
					this.animate = !this.animate; // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
				}, 600)
			},
			//木耳详情页
			getDetailData() {
				this.$api.get('/api/fungus/product_detail/' + this.id)
					.then(({data}) => {
						data.largePic = data.largePic.split(';')
						this.imgArr = data.largePic;
						
						this.itemObj = data;
						if(data.fungusCategories){
							this.superData = data.fungusCategories;
							this.superLength = data.fungusCategories.length;
						}
						
						if (Storage.get('gradeId') == null) {
							this.gradeId = data.fungusCategories[0].id; // 初始化等级id，毕竟第一次进入数据为空
						}
					})
			},
			// 物流说明
			meatTips() {
				this.meatTipsFlag = true;
			},
			getItem(index, item) {
				console.log(item.id)
				this.activeClass = index;
				Storage.set('active', index);
				this.gradeId = item.id;
				Storage.set('gradeId', item.id);
			},
			// 立即购买页面
			toHelppoorPay() {
				Storage.set('checkedYE', true) // 默认选择 余额支付
				if (Storage.get('gradeId')) {
					this.gradeId = Storage.get('gradeId');
				}
				console.log(this.gradeId)
				this.$router.push({
					path: '/helppoor/pot/pay/' + this.id,
					query: {
						gradeId: this.gradeId,
						isPot: this.superData[0].quantityUnit
					}
				})

			},
			// 客服电话
			getTelData() {
				this.$api.get('/api/index/consumer_tel')
					.then(({
						data
					}) => {
						this.cusumerTel = data.cusumerTel;
					})
			},
		},
		beforeDestroy(){
			clearInterval(timer)
		}
	}
</script>

<style lang="scss" scoped>
	@import '../detail.scss';
	
	#box {
		height: 60px;
		line-height: 25px;
		overflow: hidden;
		transition: all 0.5s;
		position: fixed;
		right: 6px;
		top: 6px;
		#con1 li {
			list-style: none;
			line-height: 29px;
			height: 27px;
			background: rgba(248, 199, 28, 0.9);
			text-align: right;
			border-radius:16px;
			padding-right: 10px;
			padding-left: 2px;
			font-size: 12px;
			color: #344047;
			margin-bottom: 4px;
			&:nth-child(1){
				transition: all .3s;
				background: rgba(248,199,28,0.9);
			}
			&:nth-child(2){
				transition: all .3s;
				background: rgba(248,199,28,0.7);
			}
			&:nth-child(3){
				transition: all .3s;
				background: rgba(248,199,28,0.5);
			}
			&:nth-child(4){
				background: rgba(248,199,28,0.3);
			}
			img{
				width: 21px;
				vertical-align: middle;
				margin-right: 1px;
			}
		}
	}

	.anim {
		transition: all 0.5s;
	}

	
	.love {
		position: fixed;
		right: 0;
		top: 22px;
		transform: scale(1);
		animation: move 4s ease-in-out 0s 1 alternate forwards;
		font-size: 26px;

		span {
			position: absolute;
			left: 20px;
			top: 100px;
			color: #fff;
		}

		i {
			position: absolute;
			left: 50px;
			top: 140px;
			color: #fff;
		}
	}

	   /*爱心动画*/
	@keyframes move {
		10% {
			transform: scale(0.6);
		}
		23% {
			transform: scale(0.65);
		}
		36% {
			transform: scale(0.6);
		}
		49% {
			transform: scale(0.65);
		}
		62% {
			transform: scale(0.6);
		}
		75% {
			transform: scale(0.65);
		}
		88% {
			transform: scale(0.6);
		}
		100% {
			transform: translate(115px, -50px) scale(0.14);
		}
	}
</style>
